<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('搜索图书')}"></head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="~{fragments/layout :: navbar}"></nav>
    
    <!-- 页面内容 -->
    <div th:replace="~{fragments/layout :: content(~{::main})}">
        <main>
            <h2 class="mb-4">搜索图书</h2>
            
            <!-- 搜索表单 -->
            <div class="card mb-4">
                <div class="card-body">
                    <form th:action="@{/books/search}" method="get" class="row g-3">
                        <div class="col-md-4">
                            <label for="keyword" class="form-label">关键词</label>
                            <input type="text" class="form-control" id="keyword" name="keyword" th:value="${param.keyword}" placeholder="书名、作者或ISBN">
                        </div>
                        <div class="col-md-3">
                            <label for="category" class="form-label">分类</label>
                            <select class="form-select" id="category" name="category">
                                <option value="">所有分类</option>
                                <option value="计算机" th:selected="${param.category != null && param.category[0] == '计算机'}">计算机</option>
                                <option value="文学" th:selected="${param.category != null && param.category[0] == '文学'}">文学</option>
                                <option value="历史" th:selected="${param.category != null && param.category[0] == '历史'}">历史</option>
                                <option value="科幻" th:selected="${param.category != null && param.category[0] == '科幻'}">科幻</option>
                                <option value="教育" th:selected="${param.category != null && param.category[0] == '教育'}">教育</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="availability" class="form-label">可借状态</label>
                            <select class="form-select" id="availability" name="available">
                                <option value="">所有状态</option>
                                <option value="true" th:selected="${param.available != null && param.available[0] == 'true'}">可借阅</option>
                                <option value="false" th:selected="${param.available != null && param.available[0] == 'false'}">已借完</option>
                            </select>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-search me-1"></i> 搜索
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 搜索结果 -->
            <div th:if="${keyword != null}">
                <h3 class="mb-3">搜索结果: <span class="text-primary" th:text="${keyword}"></span></h3>
                
                <!-- 图书列表 -->
                <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                    <div class="col" th:each="book : ${books}">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title" th:text="${book.title}">图书标题</h5>
                                <h6 class="card-subtitle mb-2 text-muted" th:text="${book.author}">作者</h6>
                                <p class="card-text">
                                    <span class="badge bg-secondary me-1" th:text="${book.category}">分类</span>
                                    <span th:if="${book.publicationYear}" class="badge bg-secondary" th:text="${book.publicationYear}">出版年份</span>
                                </p>
                                <p class="card-text text-truncate" th:text="${book.description}">图书描述...</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <span th:if="${book.availableQuantity > 0}" class="badge bg-success">可借阅</span>
                                        <span th:unless="${book.availableQuantity > 0}" class="badge bg-danger">已借完</span>
                                        <small class="text-muted ms-2" th:text="'库存: ' + ${book.availableQuantity} + '/' + ${book.quantity}">库存: 0/0</small>
                                    </div>
                                    <a th:href="@{/books/view/{id}(id=${book.id})}" class="btn btn-sm btn-outline-primary">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无结果提示 -->
                <div th:if="${#lists.isEmpty(books)}" class="alert alert-info mt-3">
                    没有找到符合条件的图书。
                </div>
                
                <!-- 分页 -->
                <nav th:if="${totalPages > 1}" class="mt-4">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${currentPage == 0} ? 'disabled' : ''">
                            <a class="page-link" th:href="@{/books/search(keyword=${keyword}, category=${param.category}, available=${param.available}, page=${currentPage - 1})}" aria-label="上一页">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item" th:each="i : ${#numbers.sequence(0, totalPages - 1)}" 
                            th:classappend="${currentPage == i} ? 'active' : ''">
                            <a class="page-link" th:href="@{/books/search(keyword=${keyword}, category=${param.category}, available=${param.available}, page=${i})}" th:text="${i + 1}">1</a>
                        </li>
                        <li class="page-item" th:classappend="${currentPage == totalPages - 1} ? 'disabled' : ''">
                            <a class="page-link" th:href="@{/books/search(keyword=${keyword}, category=${param.category}, available=${param.available}, page=${currentPage + 1})}" aria-label="下一页">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer th:replace="~{fragments/layout :: footer}"></footer>
    
    <!-- 脚本 -->
    <div th:replace="~{fragments/layout :: scripts}"></div>
</body>
</html>
